import { defineComponent, reactive, onMounted, ref } from "vue";
import styles from "./insuredAmount.module.less";
import { CheckOutlined } from "@ant-design/icons-vue";
import dayjs from "dayjs";
export default defineComponent({
  setup() {
    const state = reactive({
      last_day: '',  //最后一天
      days: '',    //剩余天数
      form: {
        type: '',   //变更类型
        insurance_start_date: '',   //起止日期
        during_start: '', //营业执照
        during_end: '',
        is_indefinitely: false,
      },
      total_expense: '' || '--',
      payment_options: '',
    } as any)

    //获取时间
    const getDate = () => {
      let nowTime = new Date();
      let YYYY = nowTime.getFullYear();
      let lastDay = YYYY + '-' + '12' + '-' + '31';
      state.last_day = lastDay;
      state.form.insurance_start_date = dayjs().format();
      state.days = Math.ceil(Math.abs(new Date(state.last_day).getTime() - new Date(state.form.insurance_start_date).getTime()) / (24 * 60 * 60 * 1000));
    }

    //附加险列表
    const additional_risk = ref([
      {
        text: '抚慰金附加保险',
        actived: '',
        children: [
          {
            label: '10万',
            value: 0,
          },
          {
            label: '20万',
            value: 1,
          },
          {
            label: '30万',
            value: 2,
          },
          {
            label: '50万',
            value: 3,
          },
        ]
      },
      {
        text: '旅行取消损失保险',
        actived: '',
        children: [
          {
            label: '10万',
            value: 0,
          },
          {
            label: '20万',
            value: 1,
          },
          {
            label: '50万',
            value: 2,
          },
          {
            label: '100万',
            value: 3,
          },
        ]
      },
      {
        text: '紧急救援费用险',
        actived: '',
        children: [
          {
            label: '100万',
            value: 0,
          },
          {
            label: '200万',
            value: 1,
          },
          {
            label: '400万',
            value: 2,
          },
          {
            label: '1000万',
            value: 3,
          },
        ]
      },
      {
        text: '扩展费用保障保险',
        actived: '',
        children: [
          {
            label: '20万',
            value: 0,
          },
          {
            label: '50万',
            value: 1,
          },
          {
            label: '100万',
            value: 2,
          },
          {
            label: '200万',
            value: 3,
          },
        ]
      },
      {
        text: '旅程延误保险',
        actived: '',
        children: [
          {
            label: '10万',
            value: 0,
          },
          {
            label: '20万',
            value: 1,
          },
          {
            label: '50万',
            value: 2,
          },
          {
            label: '100万',
            value: 3,
          },
        ]
      },
    ])

    //支付方式
    const payment0ptionsList = ref([
      {
        text: '在线支付',
        value: 0,
      },
      {
        text: '转账支付',
        value: 1,
      }
    ])
    //天数
    const during_date = () => {
      state.days = Math.ceil(Math.abs(new Date(state.last_day).getTime() - new Date(state.form.insurance_start_date).getTime()) / (24 * 60 * 60 * 1000));
    }
    //确认
    const confirm = () => {

    }
    
    //选择附加险
    const clickAdditionalRisk = (item: any, itemY: any, index: number) => {
      item.actived = itemY.value;
      if (index === 0) {
        console.log('选择了抚慰金附加保险')
      }
      if (index === 1) {
        console.log('选择了旅行取消损失保险')
      }
      if (index === 2) {
        console.log('选择了紧急救援费用险')
      }
      if (index === 3) {
        console.log('选择了扩展费用保障保险')
      }
      if (index === 4) {
        console.log('选择了旅程延误保险')
      }
      console.log(additional_risk.value[index].actived)
    }
    onMounted(() => {
      getDate()
    })

    return () => (
      <div class={styles.insuredAmount}>
        <div class={styles['header-box']}>保额变更</div>
        <div class={styles.container}>
          <div class={styles['form-box']}>
            <a-form model={state.form} label-col={{ style: { lineHeight: '40px' } }} style={{ width: '100%' }}>
              <a-form-item
                label="变更类型"
                name="type"
                required
              >
                <a-radio-group v-model:value={state.form.type} button-style="solid" name="radioGroup" style={{ height: '40px', lineHeight: '40px' }}>
                  <a-radio-button value={0} style={{ height: '40px', lineHeight: '40px' }}>批增</a-radio-button>
                  <a-radio-button value={1} style={{ height: '40px', lineHeight: '40px' }}>批减</a-radio-button>
                </a-radio-group>
              </a-form-item>
              <a-form-item
                label="保险起止日期"
                name="insurance_start_date"
                required
              >
                <a-date-picker v-model:value={state.form.insurance_start_date} style={{ width: '220px', height: '40px' }} valueFormat="YYYY-MM-DD" change={during_date()}/>
                <span>- {state.last_day}共<span class={styles.days}>{state.days}</span>天</span>
              </a-form-item>
              <div class={styles.tips}>
                <p>当天<span>0</span>时起</p>
                <p>当天<span>23:59:59</span>时止</p>
              </div>
              <a-form-item
                label="营业执照"
                required
              >
                <a-date-picker v-model:value={state.form.during_start} style={{ width: '200px', height: '40px' }} />
                <span style={{ margin: '0 3px' }}>至</span>
                <a-date-picker v-model:value={state.form.during_end} style={{ width: '200px', height: '40px' }} placeholder='截至日期' />
                <a-checkbox style={{ marginLeft: '5px' }} v-model:checked={state.form.is_indefinitely}>无期限</a-checkbox>
              </a-form-item>
            </a-form>
          </div>
          <div class={styles['basic-insurance-box']}>
            <div class={styles['basic-insurance-title']}>基本险：</div>
            <div class={styles['order-base-item']}>
              <span class={styles['item-label']}>每次事故责任限额及累计责任限额：</span>
              <span>每次事故责任限额:400万,累计责任限额:400万</span>
              <span class={styles.active}>重新选择</span>
            </div>
            <div class={styles['order-base-item']}>
              <span class={styles['item-label']}>每次事故每人人身伤亡责任限额：</span>
              <span>每次事故每人人身伤亡责任限额:100万,每人有责延误费用责任限额:1万</span>
              <span class={styles.active}>重新选择</span>
            </div>
          </div>
          <div class={styles['additional-risk']}>
            <div class={styles['additional-risk-title']}>附加险（可选）：</div>
            <div class={styles['additional-risk-list']}>
              {
                additional_risk.value.map((item: any, index: number) => (
                  <div class={styles.item}>
                    <div class={styles['item-label']}>{item.text}:</div>
                    <div class={styles['select-list']}>
                      {
                        item.children.map((itemY: any) => (
                          <div class={[styles['select-item'], itemY.value === item.actived && styles.actived]} onClick={() => { clickAdditionalRisk(item, itemY, index) }}>
                            {itemY.label}
                            {
                              item.actived === itemY.value ? <div>
                                <div class={styles['icon-checks']}></div>
                                <CheckOutlined class={styles['actived-icon']} />
                              </div> : ''
                            }
                          </div>
                        ))
                      }
                    </div>
                  </div>
                ))
              }
            </div>
          </div>
          <div class={styles['total-expense']}>
            <span>保费合计：<span class={styles['price-amount']}>￥{state.total_expense}</span>元</span>
          </div>
          <div class={styles['payment-options']}>
            {
              payment0ptionsList.value.map((itemP: any) => (
                <a-radio-group
                  v-model:value={state.payment_options}
                  name="radioGroup"
                >
                  <div class={styles['payment-options-item']} onClick={() => { state.payment_options = itemP.value }}>
                    <a-radio value={itemP.value}>
                      <span>{itemP.text}</span>
                    </a-radio>
                  </div>
                </a-radio-group>
              ))
            }
          </div>
          <div class={styles.footer}>
            <div class={styles.btn} onClick={() => { confirm() }}>确认</div>
          </div>
        </div>
      </div>
    )
  }
})